<template>
    <v-layout type="main">
        <p class="page-title">想定管理</p>
        <div class="detail-layout">
            <br />
            <el-form ref="form" :model="formData" :rules="submitRules" label-width="120px" class="alick-add-form">
                <h3 class="add-alike-title">基本信息</h3>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="formData.name" />
                </el-form-item>
                <el-form-item label="配图" prop="avatar">
                    <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formData.avatar"
                        @avatarPath="avatarPath" />
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" :rows="3" v-model="formData.desc" />
                </el-form-item>
                <h3 class="add-alike-title">环境信息</h3>
                <el-form-item label="启动命令行" prop="command">
                    <el-input type="textarea" v-model="formData.command" />
                </el-form-item>
                <el-form-item label="镜像地址" prop="url">
                    <el-input type="url" v-model="formData.url" />
                </el-form-item>
                <el-form-item label="想定挂载地址" prop="scenario_dir">
                    <el-input type="url" v-model="formData.scenario_dir" />
                </el-form-item>
                <el-form-item label="端口" prop="port">
                    <div class="outin-box" v-for="(e, i) in port_list" :key="i">
                        <div class="port-lis">
                            <el-radio-group v-model="e.protocol" class="port-lis-radio">
                                <el-radio :label="2">tcp</el-radio>
                                <el-radio :label="1">http</el-radio>
                            </el-radio-group>
                            <el-input type="text" v-model="e.port" class="port-el-input" />
                        </div>
                        <span class="outin-handle">
                            <a href="javascript:;" @click="addPort(i)" v-if="i == port_list.length - 1">增加</a>
                            <span v-else class="slot-btn"></span>
                            <a href="javascript:;" @click="delPort(i)" v-if="port_list.length > 1">删除</a>
                        </span>
                    </div>
                </el-form-item>
                <el-form-item label="资源组" prop="product_id">
                    <el-select v-model="formData.product_id" class="full-extent-select">
                        <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button class="none-type" @click="commit">确定</el-button>
                </el-form-item>

            </el-form>
        </div>
    </v-layout>
</template>
  
<script>
import { addImage } from '@/api/image'
import { getAllProducts } from '@/api/product'
export default {
    data() {
        return {
            active: 1,
            formData: { type: 3, visibility: 1 ,engine:4},
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                avatar: [
                    { required: true, message: "该项为必填项" },
                    { required: true, message: "请上传图片" },
                ],
                desc: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                scenario_dir: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                command: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 1000, message: "长度在1到1000个字符" },
                ],
                url: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 65535, message: "镜像地址" },
                ],
                port: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                product_id: [
                    { required: true, message: '请选择资源组', trigger: 'change' }
                ],
            },
            port_list: [{ protocol: 2 }],
            productOptions: []
        };
    },
    async created() {
        this.getProductList()
    },
    mounted() { },
    destroyed() { },
    methods: {

        async setAddForm() {
            this.formData.port_list = []
            for (let i = 0; i < this.port_list.length; i++) {
                if (this.port_list[i].port) {
                    this.formData.port_list.push(this.port_list[i])
                }
            }
        },
        async commit() {
            this.setAddForm()
            let ret = await addImage({ ...this.formData })
            this.image = ret.data
            this.toDetail()
        },
        async getProductList() {
            let res = await getAllProducts()
            this.productOptions = res.data
        },
        toDetail() {
            let query = {
                id: this.image.id
            }
            this.$router.push({
                path: '/gameimage/code',
                query
            })
        },

        addPort() {
            this.port_list.push({ protocol: 2 })
        },
        delPort(i) {
            this.port_list.splice(i, 1)
        },
        avatarPath(data) {
            console.log('data',data);
            this.formData.avatar = data;
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>